<template>
	<view class="itemVue">
		<view class="itemTop flex">
			<view class="img relative">
				<!-- <image src="" mode=""></image> -->
				<view class="state">报名中</view>
			</view>
			<view class="right flex-column flex-between">
				<view class="name fw600">梦启缘桥，爱绽花季浪漫相 亲奇遇记</view>
				<view class="info line-1">07/07 14:30 武汉市洪山区东武汉市洪山区东</view>
				<view class="flex-between align-center">
					<div class="users flex">
						<u-avatar src="1" size="48" class="avatar" v-for="(item, index) in 4" :key="index"></u-avatar>
					</div>
					<view class="number">已报名<text>18</text>/40</view>
				</view>
			</view>
		</view>
		<view class="itemBot flex-between align-center">
			<view class="flex align-center">
				<text class="fs24 fw600">截止报名:</text>
				<u-count-down 
					:timestamp="timestamp" 
					separator="zh" 
					bg-color="#FC132F" 
					font-size="24" 
					color="#fff"
					height="36"
					separator-size="24"
				></u-count-down>
			</view>
			<view class="btn fs24 fw600" @click="$tools.route('/pages/activity/detail')">立即报名</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				timestamp: 1000000,
			}
		}
	}
</script>

<style lang="less" scoped>
	.itemVue {
		width: 100%;
		height: 348rpx;
		border-bottom: 1rpx solid #EEEEEE;
		padding: 30rpx 0 0;
		.itemTop {
			width: 100%;
			height: 200rpx;
			.img {
				width: 320rpx;
				height: 200rpx;
				border-radius: 16rpx;
				background: #f5f5f5;
				.state {
					width: 108rpx;
					height: 44rpx;
					background: #FC9413;
					border-radius: 16rpx 0 16rpx 0;
					line-height: 44rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.right {
				flex: 1;
				height: 200rpx;
				padding-left: 20rpx;
				.name {
					line-height: 1.4;
				}
				.info {
					font-size: 24rpx;
					color: #999999;
				}
				.avatar {
					margin-left: -16rpx;
				}
				.avatar:nth-child(1) {
					margin-left: 0;
				}
				.number {
					font-size: 24rpx;
					color: #999999;
					text {
						color: #333;
						font-weight: 600;
						padding-left: 5rpx;
					}
				}
			}
		}
		.itemBot {
			width: 100%;
			height: 123rpx;
			text {
				padding-right: 10rpx;
			}
			.btn {
				width: 140rpx;
				height: 56rpx;
				background: #FC132F;
				border-radius: 4rpx;
				line-height: 56rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>